/**
 * Created by zzc on 2017/11/24
 */


'use strict'

import React, {Component} from 'react';

import {
    View,
    Text,
    Image,
    TextInput,
    Button,
    StyleSheet, TouchableHighlight
} from 'react-native';

import {deviceWidth} from "../../../base/util/ScreenUtil";
import {WH500_400} from "../../../base/Constants";

export default class HouseDetailRooms extends Component {

    constructor(props) {
        super(props)
        this.state = {
            response: "",
        }
    }

    componentWillReceiveProps = (nextProps) => {
        this.setState({
            response: nextProps.item
        });
    }

    render() {
        return (
            <View style={styles.contain}>
                <Text style={{color:"black",fontSize:13}}>室友房间</Text>
                <View style={{backgroundColor: "#F7F8FA", marginTop: 5, height: 1}}></View>

                <View style={styles.childContent}>
                    {this._renderRooms()}
                </View>
            </View>
        );
    }

    _renderRooms(){

        const info = this.state.response;
        let dataArray = info.roommates;
        let  allData = [];
        if(dataArray != null){
            for(let i=0;i<dataArray.length;i++){
                let item = dataArray[i];
                allData.push(
                    <View key={i} style={{flexDirection:"column"}}>
                        <View style={{flexDirection:"row",paddingTop:10,paddingBottom:10}}>
                            <Image style={styles.image} source={{uri:(item.imgIndex+WH500_400)}}/>

                            <View style={{flexDirection:"column",justifyContent:"flex-start",paddingLeft:10}}>

                                <View style={{flexDirection:"column",justifyContent:"space-between",height:50}}>

                                    <View style={{flexDirection:"row",width:deviceWidth/3,justifyContent:"space-between"}}>

                                        <Text style={{fontSize:14,color:"black"}}>{item.roomNo}房间</Text>

                                        <View style={{flexDirection:"row",alignItems:"center"}}>
                                            <Image style={{width:15,height:15}} source={item.gender=="男"?
                                                require("../../../resource/images/icon_room_nan.png"):require("../../../resource/images/icon_room_nv.png")}/>

                                            <Text sytle={{fontSize:14,color:"black"}}>{item.gender=="男"?"男":"女"}</Text>
                                        </View>
                                    </View>

                                    <Text >{item.size}㎡ 朝{item.direction}</Text>
                                </View>
                            </View>

                            <View style={{flex:1,flexDirection:"row",alignItems:"center",justifyContent:"flex-end",marginLeft:10}}>
                                {this._renderButton(item)}
                            </View>
                        </View>

                        <View style={{height:1,backgroundColor:"#F7F8FA"}}/>
                    </View>
                )
            }
        }
        return allData
    }

    _renderButton(item){

        if(item.id == this.state.response.id){
            return <Text style={styles.btnTextSelf}>
                本房间
            </Text>
        }else{
            if(item.status == "RENTED"){
                return <Text style={styles.btnTextRented}>
                    已出租
                </Text>
            }else if(item.status == "INVALID"){
                return <Text style={styles.btnTextRented}>
                    已失效
                </Text>
            }else if(item.status == "BOOKED"){
                return <Text style={styles.btnTextRented}>
                    已预定
                </Text>
            }else if(item.status == "RESPITE"){
                return <Text style={styles.btnTextRented}>
                    暂缓中
                </Text>
            } else if(item.status=="WAITING_RENT"){
                return <TouchableHighlight style={styles.btn}  onPress={this._onPress}>
                    <Text style={styles.btnTextWaiting}>
                        未出租
                    </Text>
                </TouchableHighlight>
            }
        }
    }
}

const styles = StyleSheet.create({
    contain: {
        backgroundColor: 'white',
        flexDirection: "column",
        paddingTop: 10,
        paddingLeft: 10,
        paddingBottom: 10,
        marginTop:10
    },
    childContent:{
        flexDirection: "column",
        padding:10
    },
    image:{
        width:60,
        height:60,
        resizeMode:"cover"
    },
    btn: {
        alignItems: 'center',
        justifyContent: 'center',
        alignSelf: 'center',
    },

    btnTextRented: {
        fontSize: 15,
        paddingLeft:15,
        paddingRight:15,
        paddingBottom:7,
        paddingTop:7,
        backgroundColor:"#DBDBDB",
        color:"white",
        borderRadius:3
    },

    btnTextWaiting: {
        fontSize: 15,
        paddingLeft:15,
        paddingRight:15,
        paddingBottom:7,
        paddingTop:7,
        backgroundColor:"#FF3366",
        color:"white",
        borderRadius:3
    },
    btnTextSelf: {
        fontSize: 15,
        color:"#FF3366",
        paddingLeft:15,
        paddingRight:15,
        paddingBottom:7,
        paddingTop:7,
    }
});